﻿<head>
<link rel="stylesheet" href="/site_media/css/base/jqueryFileTree.css" type="text/css" media="screen">
<script type="text/javascript" src="/site_media/js/lib/jquery.js"></script>
<script type="text/javascript" src="/site_media/js/lib/jqueryFileTree.js"></script>

		<style type="text/css">
			BODY,
			HTML {
				padding: 0px;
				margin: 0px;
			}
			BODY {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 11px;
				background: #EEE;
				padding: 15px;
			}
			
			H1 {
				font-family: Georgia, serif;
				font-size: 20px;
				font-weight: normal;
			}
			
			H2 {
				font-family: Georgia, serif;
				font-size: 16px;
				font-weight: normal;
				margin: 0px 0px 10px 0px;
			}
			
			.example {
				float: left;
				margin: 15px;
			}
			
			.demo {
				width: 200px;
				height: 400px;
				border-top: solid 1px #BBB;
				border-left: solid 1px #BBB;
				border-bottom: solid 1px #FFF;
				border-right: solid 1px #FFF;
				background: #FFF;
				overflow: scroll;
				padding: 5px;
			}
			
			.ContextList {
				width: 500px;
				height: 500px;
				border-top: solid 1px #BBB;
				border-left: solid 1px #BBB;
				border-bottom: solid 1px #FFF;
				border-right: solid 1px #FFF;
				background: #FFF;
				overflow: scroll;
				padding: 5px;
			}
			
			P.note {
				color: #999;
				clear: both;
			}
			
			.treeview ul { background-color: white; }

			.treeview, .treeview ul { 
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.treeview div.hitarea {
				height: 15px;
				width: 15px;
				margin-left: -15px;
				float: left;
				cursor: pointer;
			}
			/* fix for IE6 */
			* html div.hitarea {
				background: #fff;
				filter: alpha(opacity=0);
				display: inline;
				float:none;
			}
			
			.treeview li { 
				margin: 0;
				padding: 3px 0pt 3px 16px;
			}
			
			.treeview a.selected {
				background-color: #eee;
			}
			
			#treecontrol { margin: 1em 0; }
			
			.treeview .hover { color: red; cursor: pointer; }
			
			.treeview li { background: url('/site_media/images/base/tv-item.gif') 0 0 no-repeat; }
			
			/*.treeview div {width:16px; height:16px;padding-left:17px; }*/
			.treeview .expanded { background-image: url('/site_media/images/base/tv-collapsable.gif'); }
			.treeview .collapsed { background-image: url('/site_media/images/base/tv-expandable.gif'); }
			.treeview .last { background-image: url('/site_media/images/base//tv-item-last.gif'); }
			.treeview .lastCollapsable { background-image: url('/site_media/images/base/tv-collapsable-last.gif'); }
			.treeview .lastExpandable { background-image: url('/site_media/images/base/tv-expandable-last.gif'); }
		</style>

</head>

<script type="text/javascript">
function showcontext_ajax(file){
	data = {file_path:file};
    $.ajax({
        type: "POST",
        url: '{{base.getcontext_url}}',
        data: data, 
		dataType: "json",
        success: function(ret) {
			if(ret.success){
				if(ret.file_type=='image_type'){
					$('#fileContext').html(' ');
					img = 'url("'+ret.data+'") center no-repeat #FFFFFF';
					$('#fileContext').css('background',img);
					//alert($('#fileContext').html());
				}else{
					$('#fileContext').css('background',null);
					$('#fileContext').html(ret.data);
				}
			}else{
				alert('连接数据失败');
			}
        },
		error: function(event, request, settings){
			alert('error:'+event+','+settings+','+request);
		}
    });
}
	
$(document).ready( function() {
	path = unescape('{{base.path}}');
	request_url = '{{base.request_url}}';
	$('#fileTreeDemo_1').fileTree({ root: path, script: request_url }, function(file_path) { 
		showcontext_ajax(file_path);
		$('#file_path').val(file_path);
	});
});
</script>

<div class="example">
	<h2>file tree</h2>
	<div id="fileTreeDemo_1" class="demo">
	</div>
</div>

<form action="download/" method="post">
<input type="text" id="file_path" name='file_path' value='' readonly="true" width="650"/>
<input type="submit" value="down"/>
</form>

<div id="fileContext" class="ContextList">
</div>
